
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta name="csrf-token" content="cPqshWzq8AP6CPB3WnTjWi7etMHthoseg6rFAYVE">
                        <title>郑美丽</title>
            <meta name="description"
                  content="郑美丽"/>
            <meta name="Keywords" content="郑美丽"/>
                <link rel="stylesheet" href="./themes/wap/default/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="./themes/wap/default/css/iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="./themes/wap/default/css/base.css">
    <link rel="stylesheet" type="text/css" href="./themes/wap/default/css/common.css">
    <link rel="stylesheet" type="text/css" href="./themes/wap/default/css/color.css">
    <script src="./themes/wap/default/js/jquery.min.js"></script>
        <link rel="stylesheet" href="./themes/wap/default/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="./themes/wap/default/css/page.css">
    <link rel="stylesheet" type="text/css" href="./themes/wap/default/css/datepicker.css">

</head>
<body class="body-1">
<div id="container">

    <div class="mui-content" id="content_area">
        <ul class="grmp-group mt8">
            <li class="line-bot centerflex disabled">
                <label>手机</label>
                <input class="box-flex-1" name="mobile" type="text" value="13838034588" v-model="mobile"
                       disabled="disabled">
            </li>
            <li class="highlight line-bot centerflex">
                <label>头像</label>
                <span class="box-flex-1 f0"><div class="grzl-face">
                             <input type="file" style="display: none;" name="avatar" id="avatar">

                          <div class="pic-upload" v-if="avatar">
                                                                <img class="img-wh" src="http://wx.qlogo.cn/mmopen/vi_32/VBYjZ1CmCFCCfjrYexVu9Ib8oxicNQUmSaicFfJy29iaGwRwVv2tF7jzC3wGQsFJLmYOQFWGQcJaV1pN6Kn90KdHQ/0">
                                  
                          </div>
                        <div class="pic-upload" v-else>
                            <img class="img-wh" src='/uploads/defaults/default_avatar.png'>
                          </div>
                    </div></span>

            </li>
            <li class="line-bot centerflex ">
                <label>昵称</label>
                                    <input class="box-flex-1" name="nickname" type="text" v-model="nickname">
                            </li>


            <li class="line-bot centerflex ">
                <label>性别</label>
                <select name="sex" v-model="sex">
                                            <option value="1" selected>男</option>
                        <option value="2">女</option>
                    

                </select>
            </li>
            <li class="line-bot centerflex">
                <label>生日</label>
                <input class="box-flex-1" name="birthday" type="text" id="birthday" value="1990-01-01"
                       onfocus="this.blur();" v-model="birthday">
            </li>

            <li class="line-bot centerflex">
                <label>QQ</label>
                <input class="box-flex-1" name="qq" type="tel" value="" v-model="qq">
            </li>
            <li class="line-bot centerflex">
                <label>邮箱</label>
                <input class="box-flex-1" name="email" type="text" value="" v-model="email">
            </li>
        </ul>
        <div class="btn-box">
            <button class="btn" type="submit" @tap="submit">提交</button></div>
    </div>

    
    
    
    
    
    
    <!--左侧扇形导航-->
        <div class="mask_screen">
            <div class="left-nav" id="left-nav">
                <div class="menu_show circle-son clearfix">
                    <div class="menu_item">
                        <a href="/wap"><i class="iconfont icon-gouwudai1"></i>首页</a>
                    </div>
                    <div class="menu_item">
                        <a href="http://qm815204.b2c.qmai.cn/wap/goods/lists"><i class="iconfont icon-icon1460187848267"></i>搜索</a>
                    </div>
                    <div class="menu_item">
                        <a href="http://qm815204.b2c.qmai.cn/wap/cart/index"><i class="iconfont icon-gouwuche1"></i>购物车</a>
                    </div>
                    <div class="menu_item">
                        <a href="http://qm815204.b2c.qmai.cn/wap/user/index"><i class="iconfont icon-gerenzhongxinxia"></i>个人中心</a>
                    </div>
                    <div class="menu_item">
                        <a href="http://qm815204.b2c.qmai.cn/wap/collect/index"><i class="iconfont icon-shoucang3"></i>收藏</a>
                    </div>
                    
                        
                    
                </div>
                <div class="circle-nav circle-menu">快速导航</div>
            </div>
        </div>
        <!--左侧扇形导航-->
    </div>
<script src="./themes/wap/default/js/mui.min.js"></script>
<script src="http://qm815204.b2c.qmai.cn/plugins/vue/vue.js"></script>
<script src="http://qm815204.b2c.qmai.cn/plugins/layer/mobile/layer.js"></script>
<script src="./themes/wap/default/js/public.js"></script>
    <script src="./themes/wap/default/js/datePicker.js"></script>
    <script>
        var vm = new Vue({
            el: '#content_area',
            data: {
                nickname: 'qmai_13838034588',
                sex: '1',
                birthday: '2000-01-01',
                mobile: '13838034588',
                qq: '',
                email: '',
                avatar: 'http://img-shop.qmimg.cn/http://wx.qlogo.cn/mmopen/vi_32/VBYjZ1CmCFCCfjrYexVu9Ib8oxicNQUmSaicFfJy29iaGwRwVv2tF7jzC3wGQsFJLmYOQFWGQcJaV1pN6Kn90KdHQ/0'


            },
            mounted: function () {
                var calendar = new datePicker();
                calendar.init({
                    'trigger': '#birthday', /*按钮选择器，用于触发弹出插件*/
                    'type': 'date', /*模式：date日期；datetime日期时间；time时间；ym年月；*/
                    'minDate': '1900-1-1', /*最小日期*/
                    'maxDate': '2100-12-31', /*最大日期*/
                    'onSubmit': function () {/*确认时触发事件*/
                        var theSelectData = calendar.value;
                    },
                    'onClose': function () {/*取消时触发事件*/
                    }
                });
            },
            methods: {
                submit: function (e) {

                    $.ajax({
                        url: "http://qm815204.b2c.qmai.cn/wap/user/info",
                        type: "post",
                        dataType: 'json',
                        data: this.$data,

                        success: function (result) {

                            if (result.status === true) {
                                tips(result.message);
                                self.location = "http://qm815204.b2c.qmai.cn/wap/user/index";
                            } else {
                                tips(result.message);
                            }
                        }
                    });
                },
                imageThumb: function (src) {
                    if (src) return image(src, 52, 52, 5);
                },
            }
        });
        $(document).on('tap', '.pic-upload', function (e) {
            e.preventDefault();
            $(this).parent().find('input[type="file"]').trigger('click');

            return false;
        });

        $(document).on('change', 'input[name="avatar"]', function (e) {
            var file = this.files[0];
            console.log(file);
            if (!checkImageMime(file)) {
                tips('文件类型不允许');
                $(this).val('');
                return false;
            }
            if (!checkImageSize(file)) {
                tips('文件超过最大限制' + format_file_size(allowSize));
                $(this).val('');
                return false;
            }
            var url = getFileBlobUrl(file);
            url && $('.pic-upload').html("<img class='img-wh' src='" + url + "' />");

            upload_image(file);
        });
        function upload_image(file, callback) {
            if (!file) return;
            var data = new FormData();
            data.append("avatar", file);
            loader.show();
            $.ajax({
                data: data,
                type: "POST",
                url: "http://qm815204.b2c.qmai.cn/wap/user/upload-avatar",
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function (result) {
                    if (result.status) {
                        loader.close();
                        tips('图片上传成功');
                        vm.avatar = result.data;
                        typeof callback == 'function' && callback(result.data);
                    } else {
                        layer.error(result.message);
                    }
                }
            });
        }

    </script>
<script>
    //左侧扇形导航
    mui(".left-nav").on("tap", ".circle-menu", function () {
        $(".circle-son").toggleClass("on");
        $(".mask_screen").toggleClass("mask_bg");
        $(".circle-nav").toggleClass("on_left");
        if ($(".circle-menu").text() == "快速导航") {
            $(".circle-menu").text("收起导航");
        } else {
            $(".circle-menu").text("快速导航");
        }
    });
    //左侧扇形导航
    //左侧扇形导航拖拽
    // 获取节点
    var block = document.getElementById("left-nav");
    var oW, oH;
    // 绑定touchstart事件
    block.addEventListener("touchstart", function (e) {
        console.log(e);
        var touches = e.touches[0];
        oW = touches.clientX - block.offsetLeft;
        oH = touches.clientY - block.offsetTop;
        //阻止页面的滑动默认事件
        document.addEventListener("touchmove", defaultEvent, false);
    }, false)

    block.addEventListener("touchmove", function (e) {
        var touches = e.touches[0];
        var oLeft = touches.clientX - oW;
        var oTop = touches.clientY - oH;
        if (oLeft < 0) {
            oLeft = 0;
        } else if (oLeft > document.documentElement.clientWidth - block.offsetWidth) {
            oLeft = (document.documentElement.clientWidth - block.offsetWidth);
        }
        block.style.left = oLeft + "px";
        block.style.top = oTop + "px";
    }, false);

    block.addEventListener("touchend", function () {
        document.removeEventListener("touchmove", defaultEvent, false);
    }, false);

    function defaultEvent(e) {
        e.preventDefault();
    }

        </script>
</body>
</html>
<!---带扇形 不带footer->
